<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    </link>
    <script src="js/vue.js"></script>
    <script src="js/elementui.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/common.js"></script>
</head>

<body>
    <div id="app">
        <el-container>
            <el-header>后台管理页面</el-header>
            <el-container>
                <el-aside width="200px">
                    <el-tree :data="data" default-expand-all="el-tree" props="defaultProps"
                        @node-click="handleNodeClick"></el-tree>
                </el-aside>
                <el-main>
                    <iframe :src="src" frameborder="0" style="width: 100%; height: 98%;"></iframe>
                </el-main>
            </el-container>
        </el-container>
    </div>
</body>
<style>
    body {
        margin: 0;
    }

    .el-header {
        text-align: center;
        line-height: 60px;
        color: white;
        /* 字体大小 */
        font-size: 20px;
        /*上面*/
        border-bottom: 1px solid rgb(222, 222, 222);
        background-color: pink;
    }

    .el-aside {
        /*左边*/
        border: 1px solid pink;
        /* 绝对地位 */
        position: absolute;
        top: 60px;
        bottom: 0px;
    }

    .el-main {
        /*右边*/
        border: 1px solid black;
        position: absolute;
        right: 0px;
        left: 200px;
        bottom: 0px;
        top: 60px;
        padding: 0px;
    }
</style>
<script>
    new Vue({
        el: "#app",
        data: {
            src: "",
            data: [{
                label: '一级 1',
                children: [{
                    label: '二级 1-1',
                    children: [{
                        label: '按钮',
                        href: "login.html",
                    }]
                }]
            }]
        },
        defaultProps: {
            children: 'children',
            label: 'label'
        },
        methods: {
            handleNodeClick(data) {
                this.src = data.href
                console.log(data);
            }
        },
        // 页面加载前执行
        beforeMount() {
            var username = sessionStorage.getItem("username");
            var password = sessionStorage.getItem("password");
            axios.post('http://localhost:8080/login?username=' + username + "&password=" + password).then(res => {
               console.log(res);
               
                this.data = arrayToTree(res.data.menus);
            })
        }
    })
</script>

</html>